<template>
  <n-drawer class="particulars-list" v-model:show="active" width="63%">
    <n-drawer-content body-style="--n-body-padding:0;" style="--n-header-border-bottom:none">
      <template #header>
        <div class="my-title--primary">至尊钱包（明细）</div>
      </template>
      <div class="particulars-list__content">
        <div class="particulars-list__content--money">钱包金额：￥9999.25</div>
        <n-data-table bordered
          :columns="[{ title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }, { title: 'Address', key: 'address' }]"
          :data="[{
            key: 0, name: 'John Brown',
            age: 32,
            address: 'New York No. 1 Lake Park'
          },
          {
            key: 1,
            name: 'Jim Green',
            age: 42,
            address: 'London No. 1 Lake Park'
          },
          {
            key: 2,
            name: 'Joe Black',
            age: 32,
            address: 'Sidney No. 1 Lake Park'
          }
          ]" striped style="--n-font-size:24px" />
      </div>
      <template #footer>
        <div style="display: flex; align-items: center; width: 100%;">
          <n-pagination v-model:page="page" :page-count="100" :page-slot="7"
            style="--n-item-size:44px;--n-item-font-size:20px;">
            <template #prev>
              上一页
            </template>
            <template #next>
              下一页
            </template>
            <template #suffix>
              <div class="particulars-list__jump-page">到<input type="number" />页<button>确定</button><span>10 条 / 页</span>
              </div>
            </template>
          </n-pagination>
        </div>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup>
import { inject, ref } from "vue";
const active = inject('particularsListDrawer');
const page = ref(1);
</script>

<style lang="less">
.particulars-list {
  .my-title--primary {
    margin-left: 23px;
  }

  &__content {
    margin: 0 30px;

    &--money {
      margin: 20px 0 30px 0;
      font-size: 30px;
      font-weight: bold;
      color: #4A5060;
      line-height: 1;
    }
  }

  &__jump-page {
    font-size: 21px;
    color: #4A5060;
    margin: -2px 0 0 18px;

    input {
      margin: 0 15px;
      width: 64px;
      height: 42px;
      background: #F8F8F8;
      border: 1px solid #E5E5E5;
      border-radius: 5px;
      text-align: center;
    }

    button {
      margin: 0 30px;
      width: 88px;
      height: 44px;
      color: #FDFDFD;
      background: #2C8CF0;
      border-radius: 5px;
    }
  }
}
</style>